<template>
  <div>
    <Header></Header>
    <Nav></Nav>

    <div class="content1">
      <el-tabs :tab-position="tabPosition" style="height: 400px;">
        <!-- 修改密码 -->
        <el-tab-pane label="修改密码">
          <input type="text" v-model="userName" class="ipt1" placeholder="请输入账号"><br>
          <input type="password" v-model="userPassword" class="ipt3" placeholder="请输入新密码"><br>
          <button class="btn1" @click="commit">确认</button><br>
        </el-tab-pane>
        <!-- 购物车 -->
        <el-tab-pane label="我的购物车">
          <div class="content">
            <div class="box" v-for="(sc, index) in shopCar">
              <img v-if="sc.goodsName == '飞鹤奶粉'" src="../assets/shop_drink1.jpg"
                style="width: 194px;height: 138px;float: left;">
              <img v-if="sc.goodsName == '伊利奶粉'" src="../assets/shop_drink2.jpg"
                style="width: 194px;height: 138px;float: left;">
              <img v-if="sc.goodsName == '澳大利亚进口奶粉'" src="../assets/shop_drink5.webp"
                style="width: 145px;height: 138px;float: left;margin-left: 30px;">
              <img v-if="sc.goodsName == '特步婴儿帽'" src="../assets/shop_clother4.webp"
                style="width: 181px;height: 138px;float: left;">
              <span style="display: block;height: 138px;">{{ sc.goodsName }}</span>
              <p class="price">价格：{{ sc.price * sc.account }}</p>
              <p class="account"><button @click="addAccounts(index)">+</button>&nbsp;&nbsp;{{ sc.account
              }}&nbsp;&nbsp;<button @click="subAccounts(index)">-</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="result"
                  @click="result(index)">结算</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="delete"
                  @click="deletes(index)">删除</button>
              </p>
            </div>
          </div>
        </el-tab-pane>
        <!-- 订单 -->
        <el-tab-pane label="我的订单">
          <div>
            <table>
              <tr>
                <td>商品名称</td>
                <td class="t1">商品单价</td>
                <td class="t1">商品数量</td>
                <td class="t1">商品总价</td>
              </tr>
            </table>
            <div v-for="(o, index) in  orders ">
              <table>
                <tr>
                  <td class="c_first">{{ o.goodsName }}&nbsp;
                  </td>
                  <td class="c_first">{{ o.price }}</td>
                  <td class="c_first">{{ o.quantity }}</td>
                  <td class="c_first">{{ o.sumPrice }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div>
            <span class="s">总计：{{ this.sum }}/元</span>
            <button class="order_btn" @click="pay">点击支付</button>
          </div>

        </el-tab-pane>
        <!-- 收藏 -->
        <el-tab-pane class="collection_content" label="关注/收藏">
          <div v-for="( cc, index ) in  collection_select ">
            <p>主题：</p>
            <router-link to="search_select">
              <p @click="detect_collection(index)" class="title">{{ cc.title
              }}</p>
            </router-link>
            <a @click="delete_collection(index)" class="cancel_collection" href="">取消收藏</a>
          </div>
        </el-tab-pane>
        <!-- 申请 -->
        <el-tab-pane class="apply" label="招聘申请">
          <div v-for="( a, index ) in  application ">
            <table>
              <tr>
                <td class="c_first"><span class="c">单位：</span>{{ a.application_garden }}</td>
                <td class="c_first"><span class="c">岗位：</span>{{ a.application_job }}</td>
                <td class="c_first"><span class="c">申请状态：</span>{{ a.status }}</td>
              </tr>
            </table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <a class="toLogin" @click="toLogin()" href="###">退出登录</a>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'

export default {
  name: 'personal',
  components: {
    Header,
    Nav,
    Footer
  },
  data() {
    return {
      tabPosition: 'left',
      userName: [],
      userPassword: [],
      shopCar: [],
      collection_select: [],
      detectCollection: [],
      username: '刘学',
      application: [],
      orders: [],
      sum: 0,
      flag: true,
      flag1: true,
    };
  },
  created() {
    ////搁置：获取用户用户名
    // eventBus.$on('username', item => {
    //   this.usernames = item
    //   console.log(this.usernames)
    // }, 200)
  },
  mounted() {
    // 搁置：获取用户id修改密码
    // eventBus.$on('uid', item => {
    //   this.uid = item
    //   console.log(this.uid)
    // })

    //我的购物车
    this.$axios.get('/api/shopcar/selectshopcar')
      .then(res => {
        this.shopCar = res.data
      }),
      //我的收藏
      this.$axios.get('/api/userCollection/selectcollection')
        .then(res => {
          this.collection_select = res.data
        }),
      //我的申请
      this.$axios.get('/api/user_application/selectApplication')
        .then(res => {
          this.application = res.data
          this.flag2 = false
          // console.log(this.application)
        }),
      //获取订单
      this.$axios.get('/api/orders/selectOrder')
        .then(res => {
          console.log(res.data)
          if (res.data == '查无数据') {
            this.flag1 = false
          }
          this.orders = res.data
        })
  },
  methods: {
    // 修改密码
    commit() {
      this.$router.push('/personal')
      this.$axios.post(`/api/user/updatePassword/${this.userName}`, { userPassword: this.userPassword })
        .then(res => {
          // console.log(res.data)
          alert("修改成功")
        })
    },
    //退出登录
    toLogin() {
      this.$router.push('/login');
    },
    //增加购物数量按钮
    addAccounts(index) {
      this.shopCar[index].account++
    },
    //减少购物数量按钮
    subAccounts(index) {
      this.shopCar[index].account--
      if (this.shopCar[index].account < 0) {
        this.shopCar[index].account = 0
      }
    },
    // 结算
    result(index) {
      this.$axios.post('/api/orders/addOrder', { goodsName: this.shopCar[index].goodsName, price: this.shopCar[index].price, quantity: this.shopCar[index].account, sumPrice: this.shopCar[index].price * this.shopCar[index].account })
        .then(res => {
          alert('已提交至订单')
          location.reload();
        })
    },
    // 删除购物车
    deletes(index) {
      this.$axios.post(`/api/shopcar/deleteshopcar/${this.shopCar[index].id}`).then(res => {
        this.$axios.get('/api/shopcar/selectshopcar')
          .then(res => {
            // console.log(res.data)
            this.shopCar = res.data
            // console.log(this.shopCar)
          })
      })

    },
    //取消收藏
    delete_collection(index) {
      this.$axios.post(`/api/userCollection/deletecollection/${this.collection_select[index].id}`).then(res => {
        alert("取消成功")
        this.$axios.get('/api/userCollection/selectcollection')
          .then(res => {
            // console.log(this.shopCar)
          })
      })

    },
    //查看收藏
    detect_collection(index) {
      this.$axios.get(`/api/information/detect/${this.collection_select[index].title}`, {
      })
        .then(res => {
          this.detectCollection = res.data
          // console.log(this.detectCollection)
          setTimeout(() => {
            eventBus.$emit('select_content', this.detectCollection)
          }, 100),
            //搁置：获取用户用户名
            setTimeout(() => {
              eventBus.$emit('username', this.username)
            }, 100)
        })
    },
    // 支付
    pay() {
      while (this.flag == true) {
        for (let i = 0; i < this.orders.length; i++) {
          this.sum = this.orders[i].sumPrice + this.sum
        }
        this.flag = false
      }
      setTimeout(() => {
        var s = prompt('请输入支付金额：')
        if (s == this.sum) {
          this.$axios.post('/api/orders/deleteOrder')
            .then(res => {
              alert('您已支付，欢迎下次光临')
              location.reload();
            })
        } else {
          alert('支付失败')
        }
      }, 300)

    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: black;
}

.content1 {
  margin-top: 10px;
  margin-left: 260px;
  margin-bottom: 30px;
  width: 800px;
  height: 400px;
  box-shadow: 0 0 15px gray;
}

.ipt1,
.ipt2,
.ipt3 {
  margin-top: 60px;
  margin-left: 200px;
  height: 40px;
  width: 300px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
}

.btn1 {
  margin-top: 50px;
  margin-left: 300px;
  width: 100px;
  height: 40px;
  border: none;
}

.toLogin {
  position: absolute;
  margin-top: -187px;
  margin-left: 29px;
}

.content {
  /* 设置盒子内容上下滚动 */
  height: 320px;
  overflow: auto;
}

.box {
  position: relative;
}

.price {
  position: absolute;
  top: 20px;
  left: 200px;
}

.account {
  position: absolute;
  top: 60px;
  left: 200px;
}

.result,
.delete {
  width: 84px;
  height: 36px;
  color: white;
  border-radius: 10px 10px;
}

.delete {
  border: 1px solid gray;
  background-color: gray;
}

.result {
  border: 1px solid red;
  background-color: red;
}

.collection_content {
  height: 320px;
  overflow: auto;
}

.title {
  margin-left: 40px;
}

.cancel_collection {
  margin-left: 245px;
  color: blue;
}

.c {
  color: red
}

.c_first {
  padding-top: 20px;
  width: 200px;
}

.order_btn {
  position: fixed;
  top: 520px;
  left: 950px;
  width: 100px;
  height: 40px;
  border: none;
  background-color: red;
  border-radius: 10px 10px;
}

.s {
  position: fixed;
  top: 530px;
  left: 850px;
}

.apply {
  height: 320px;
  overflow: auto;
}

.t1 {
  padding-left: 100px;
}
</style>
